<template>
  <div class='tinymce'>
    <editor id='tinymce' v-model='html' :init='init' ref="tinymce"></editor>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
  components: { editor },
  data() {
    return {
      html: '',
      init: {
        language_url: '/src/components/Tinymce/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/src/components/Tinymce/tinymce/skins/lightgray',
        height: 300,
        plugins: this.concise ? 'image code table textcolor' : this.plugins,
        toolbar: this.toolbar,
        branding: false
      }
    }
  },
  props: {
    /* 插件
    link：超链接
    lists：编号
    image：图片
    code：源代码
    table: 表格
    colorpicker：取色器（未知）
    textcolor：文本颜色
    wordcount：文字统计
    contextmenu：上下文菜单（未知） */
    plugins: { // 插件
      type: String,
      default: 'link lists image code table colorpicker textcolor wordcount contextmenu'
    },
    toolbar: { // 工具栏
      type: String,
      default: 'bold italic underline strikethrough | ' + 'fontsizeselect | ' +
               'forecolor backcolor | alignleft aligncenter alignright alignjustify | ' +
               'bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat'
    },
    concise: { // 简洁模式
      type: Boolean,
      default: true
    },
    content: { // 传入文本
      type: String,
      default: ''
    }
  },
  methods: {
    // 获取富文本内容
    getContent() {
      return this.html
    }
  },
  watch: {
    content(value) {
      this.html = value
    }
  },
  mounted() {
    this.$nextTick(() => {
      tinymce.init({})
    })
  },
  created() {
    this.html = this.content
  }
}
</script>

<style lang="scss">
  .tinymce {
    >.mce-panel {
      border: 1px solid #dcdfe6;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
    >.mce-tinymce {
      box-shadow: none;
    }
    .mce-btn button {
      font-size: 13px;
    }
    .mce-ico {
      font-size: 13px;
      width: 13px;
    }
  }
</style>
